<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <!-- import CSS -->
    <link rel="stylesheet" href="element.css">
    <link rel="stylesheet" href="./common.css">
    <!-- /* 当屏幕的宽度大于等于400px的时候，应用 mini.css */ -->
    <link rel="stylesheet" type="text/css" href="mini.css" media="screen and (min-width: 400px)">
    <!-- /* 当屏幕的宽度大于600 小于800px时，应用small.css */ -->
    <link rel="stylesheet" type="text/css" href="small.css" media="screen and (min-width: 600px) and (max-width: 800px)">
    <!-- /* 当屏幕的宽度大于800 小于1100px时，应用midium.css */ -->
    <link rel="stylesheet" type="text/css" href="small.css" media="screen and (min-width: 800px) and (max-width: 1100px)">

    <style>
        *{margin: 0;padding: 0;}
        .el-image__inner{
            vertical-align:middle
        }
        h3{font-size: 42px;font-weight: normal;margin:65px 0}
        h4{font-size: 30px;color: #676767;font-weight: normal;margin-top: 50px;}
        .content{padding-top: 100px;padding-bottom: 228px;}
        .el-form>div{justify-content: space-between;margin-top: 36px;}
        .el-form .el-form-item{width: 32%;height:68px;margin-bottom: 0;}
        .el-form .el-input__inner{height: 68px;border: 0;font-size: 20px;border-radius: 3px;}
        .el-textarea__inner{border: 0;font-size: 24px;border-radius: 3px;font-family: Arial;padding-top: 30px;}
        .el-form .textareaBox,.el-textarea,.textareaBox .el-form-item.el-form-item--feedback,.el-textarea__inner{width: 100%;height: 250px;border: 0;border-radius: 3px;}
        .el-form>.checkBox{display: flex;justify-content: flex-start;}
        .el-form>.checkBox .el-form-item.el-form-item--feedback{width: 100%;}
        .el-form>.checkBox .el-form-item__content{display: flex;}
        .checkBox .el-input__inner, .checkBox .el-input{width: 418px;}
        .checkBox .el-image{width: 192px;height: 68px;margin: 0 20px;}
        .checkBox span.iconfont{font-size: 42px;color: #000;transform: rotate(54deg);text-align: center;line-height: 68px;height: 68px;}
        .checkBox span:hover{cursor: pointer;transform: rotate(24deg);transition: all 0.5s;}
        .checkBox .el-button.el-button--primary{width: 184px;height: 68px;border-radius: 68px;background: #474747;color: #fff;line-height: 68px;padding: 0;font-size: 30px;}
        .companyDetail{overflow: hidden;display: flex;align-items: end;}
        .companyDetail p{text-indent: 2em;}
        .companyDetail img{float: left;}
        .proDetail img{width: 100%;}
    </style>
    <link rel="stylesheet" href="common.css">
</head>
<body>
    <div id="app" class="mainBg" v-cloak>
        <!-- 导航栏 -->
        <my-header :page-id="4" :lang="lang">
            <my-drawer></my-drawer>     
        </my-header>
        <el-row class="flexBox">
            <el-col :span="19" style="margin: auto;"><div class="content">
              <!-- 公司介绍 -->
                <h3 class="mainColor">{{language.company}}</h3>
                <div class="companyDetail">
                  <img src="img/compute.png" class="image multi-content" />
                  <p>{{language['companyIntro']}}
                  </p>
                </div>
                  
                
                <h3 class="mainColor">{{language.products}}</h3>
                <div class="proDetail">
                  <img src="img/compute.png" class="image multi-content" />
                  <p>{{language['aboutProText']}}</p> 
                </div>
                        
                <!-- 提交合作或者问题 -->
                <h4>{{language.formTitle}}</h4>
                <el-form action=“text” method="post" id="myForm" :model="ruleForm" label-width="0" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <div class="flexBox"><el-form-item prop="name">
                      <el-input type="text" :placeholder="language.name" v-model="ruleForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item  prop="email">
                      <el-input type="text" :placeholder="language.email"  v-model="ruleForm.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item  prop="phoneNumber">
                      <el-input type="text" :placeholder="language.phoneNumber"  v-model.number="ruleForm.phoneNumber"></el-input>
                    </el-form-item>
                    </div>
                    <div class="textareaBox">
                        <el-form-item><el-input resize="none" type="textarea" :placeholder="language.suggestionsPlaceholder" v-model="ruleForm.desc"></el-input>
                        </el-form-item>
                    </div>
                    <div class="checkBox">
                        <el-form-item>
                            <el-input :placeholder="language.checkCode"></el-input>
                            <el-image>
                            </el-image>
                            <span class="iconfont">&#xe64c;</span>
                        </el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">{{language.submit}}</el-button>
                    </div>
                </el-form>
            </div></el-col>
        </el-row>
        <my-footer></my-footer>
    </div>
    <script src="./localLang.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/element-ui.js"></script>
    <script src="./drawer.js"></script>
    <script src="./header.js"></script>
    <script src="./footer.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                loading: false,
                resizable: false,
                index: 0,
                visible:false,
                lists:[],
                lang:Number(localStorage.getItem('langType')),
                ruleForm:{}
            },
            mounted(){
                this.lists = [
                {
                  imgUrl:
                    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
                  name: '鹿',
                },
                {
                  imgUrl:
                    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
                  name: '马',
                },
                {
                  imgUrl:
                    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
                  name: '山狮',
                },
              ]
            },
            methods: {
              submitForm(){
                // let formElement = document.getElementById("myForm")
                // formElement.appendChild({
                //   test:'',
                //   test2:"",
                // })
                // formElement.submit();
                  // this.$refs.form.submit()
              }
            },
            computed:{
                language(){
                    return LANG[this.lang]
                }
            },
        });
      </script>
</body>
</html>